<template>
  <div class="page home-page">
    <header-bar />
    <div class="content">
      <banner-slide :slides="bannerData" />
      <div class="product-wrap">
        <md-tab-bar :menu="tabMenuData" class="home-tab" textKey="title" @change="tabChange" />
        <md-product-list :products="products" />
      </div>
    </div>
    <!-- <header-bar />
    <div class="content">
      <banner-slide />
      <menu />
      <div class="product-wrap">
        <tab-bar :menu="[]" @change="(index) => {}" />
        <product-list />
      </div>
    </div> -->
  </div>
</template>

<script>
import HeaderBar from './components/headerBar'
import BannerSlide from './components/bannerSlide'

import scroll from '@/mixins/scroll'

export default {
  name: 'Home',
  data () {
    return {
      bannerData: [],
      tabMenuData: [],
      products: [],
      fetchParams: {
        page: 1,
        pageSize: 5
      }
    }
  },
  components: {
    HeaderBar,
    BannerSlide
  },
  mixins: [scroll],
  created () {
    this.initData()
    this.fetchProductList()
  },
  methods: {
    async initData () {
      const bannerData = await this.$api.home.banner()
      const tabMenuData = await this.$api.home.tab()
      this.bannerData = bannerData.data
      this.tabMenuData = tabMenuData.data
    },
    async fetchProductList () {
      const productsData = await this.$api.product.list(this.fetchParams)
      if (this.fetchParams.page === 1) {
        this.products = productsData.data
      } else {
        this.products = this.products.concat(productsData.data)
      }
    },
    tabChange (index, row) {
      this.fetchParams.page = 1
      this.fetchProductList()
    },
    onReachBottom () {
      console.log('到底部')
      this.fetchParams.page += 1
      this.fetchProductList()
    }
  }
}
</script>

<style lang="scss" scoped>
.home-tab {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
}
</style>
